<template>
  <div>
    <div :class="[
            'u3-textarea',
            {'is-error':state === 2,
             'is-right':state === 1,
             'is-focus':isFocus
            }
        ]">
      <textarea
        class="u3-textarea__content"
        ref="U3textarea"
        :class="{ diableddCursor: disabled }"
        :autofocus="autofocus"
        :placeholder="placeholder"
        :readonly="readonly"
        :rows="rows"
        :maxlength="maxlength"
        :disabled="disabled"
        :showLength="showLength"
        :cols="cols"
        :resize="resize"
        :value="value"
        :style="{ resize: resize }"
        @input="changeInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
      ></textarea>
      <span class="u3-textarea__length" v-if="maxlength && showLength">{{ textLength }}/{{ maxlength }}</span>
            <!-- <template v-if="state>0">
            <div
                class="u3-textarea__icon"
                :style="calcIconStyle"
            />
        </template> -->
    </div>
  </div>
</template>

<script>
import { props } from './props'
export default {
  name: 'U3Textarea',
  data() {
    return {
      border: 2,
      textLength: 0,
      isFocus: false,
      styleicon: { 'margin-top': '0.09rem', 'margin-bottom': '0.09rem' },
    }
  },
  created() {
    this.textLength = this.value.length
  },
  props,//抽取props
  watch: {
    value: {
      handler(newval) {
        this.textLength = newval.length
        if (this.autoHeight) {
          let el = this.$refs.U3textarea
          el.style.height = 'auto'
          el.style.height = el.scrollHeight + this.border + 'px'
        }
      },
    },
  },
  computed:{
      calcIconStyle() {
          return this.styleicon;
      },
  },
  methods: {
    /*
     *组件 v-model
     */
    changeInput(e) {
      this.$emit('input', e.target.value) //默认是input
    },
    handleBlur(event) {
         this.isFocus = false;
      this.$emit('blur', event)
    },
    handleFocus(event) {
      if (this.readonly) return
        if (!this.readonly) this.isFocus = true;
      this.$emit('focus', event)
    },
    handleChange(event) {
      this.$emit('change', event.target.value)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../scss/common/index';
@import '../../../scss/textarea/variables';
.u3-textarea {
    font-size: $textarea-font-size;
    position: relative;
    width: fit-content;
    // border: 2px green solid;
  .u3-textarea__content {  
    border-color: $textarea-border-color;
    background-color: $textarea-background-color;
    outline-color: $textarea-outline-color;
    border-radius: $textarea-radius;
    min-width: $textarea-min-width;
    min-height: $textarea-min-height;
  }
  .u3-textarea__length {
    position: absolute;
    bottom: $textarea-length-bottom;
    right: $textarea-length-right;
    font-size: $textarea-length-font-size;
  }
}
.diableddCursor {
  cursor: not-allowed;
}

</style>